<template>
  <div class="supervise">
    <div
      class=""
      v-for="(item, index) in list"
      :key="index"
      @click="toPage(item)"
      :style="{ background: item.color }"
    >
<!--      <p v-if="item?.number">{{ item?.number }}</p>-->
      <p>{{ item.text }}</p>
    </div>
  </div>
</template>

<script setup>
import { Dialog, Toast } from 'vant'
import { useRouter } from 'vue-router'
import { monthNoCheckNumber } from '@/service/village'
import { storeToRefs } from 'pinia'
import { useLoginStore } from '@/store'
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'

const loginStore = useLoginStore()
const { loginInfo } = storeToRefs(loginStore)

const router = useRouter()
const list = ref([
  {
    path: 'supervise-unchecked',
    text: '上个月未自查房屋',
    color: '#FFAE49',
    number: ''
  },
  {
    path: '',
    text: '视频监管',
    color: '#FFA273'
  }
])

const toPage = record => {
  if (!record?.path) {
    Toast('暂未开放')
    return
  } else {
    router.push({
      name: record.path
    })
  }
}

const getNumber = async () => {
  const result = await monthNoCheckNumber({
    xzqdm: loginInfo.value?.xzqdm,
    towndm: loginInfo.value?.towndm,
    villagedm: loginInfo.value?.villagedm,
  })
  if (result?.data) {
    Dialog.alert({
      message: `上个月未自查房屋数：${result?.data}`,
      confirmButtonText: "查看",
    }).then(() => {
      localStorage.setItem(dayjs().format('YYYY-MM'), 1)
      router.push({
        name: "supervise-unchecked",
      })
    })
  }
  // list.value[0].number = result?.data
}

onMounted(() => {
  if (+localStorage.getItem(dayjs().format('YYYY-MM')) !== 1) {
    getNumber()
  }
})
</script>

<style scoped lang="less">
.supervise {
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 90%;
    height: 300px;
    text-align: center;
    box-shadow:
      0 2px 10px rgba(136, 152, 170, 0.15), /* 主阴影 */
      0 1px 2px rgba(136, 152, 170, 0.1);    /* 辅助阴影 */
    font-size: 44px;
    border-radius: 16px;
    p {
      color: #fff;
      height: 60px;
      line-height: 60px;
    }
  }
}
</style>